<template>
  <div>
    <oolongRadio v-model="single">Radio</oolongRadio>
    <br><br>
    <oolongRadioGroup v-model="phone">
      <oolongRadio label="apple">
        <oolongIcon type="social-apple"></oolongIcon>
        <span>Apple</span>
      </oolongRadio>
      <oolongRadio label="android">
        <oolongIcon type="social-android"></oolongIcon>
        <span>Android</span>
      </oolongRadio>
      <oolongRadio label="windows">
        <oolongIcon type="social-windows"></oolongIcon>
        <span>Windows</span>
      </oolongRadio>
    </oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="animal">
      <oolongRadio label="金斑蝶"></oolongRadio>
      <oolongRadio label="爪哇犀牛"></oolongRadio>
      <oolongRadio label="印度黑羚"></oolongRadio>
    </oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="disabledSingle" disabled>Radio</oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="disabledGroup">
      <oolongRadio label="金斑蝶" disabled></oolongRadio>
      <oolongRadio label="爪哇犀牛"></oolongRadio>
      <oolongRadio label="印度黑羚"></oolongRadio>
    </oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="vertical" vertical>
      <oolongRadio label="apple">
        <oolongIcon type="social-apple"></oolongIcon>
        <span>Apple</span>
      </oolongRadio>
      <oolongRadio label="android">
        <oolongIcon type="social-android"></oolongIcon>
        <span>Android</span>
      </oolongRadio>
      <oolongRadio label="Windows">
        <oolongIcon type="social-windows"></oolongIcon>
        <span>Windows</span>
      </oolongRadio>
    </oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="button1" type="button">
      <oolongRadio label="北京"></oolongRadio>
      <oolongRadio label="上海"></oolongRadio>
      <oolongRadio label="深圳"></oolongRadio>
      <oolongRadio label="杭州"></oolongRadio>
    </oolongRadioGroup>
    <oolongRadioGroup v-model="button2" type="button">
      <oolongRadio label="北京"></oolongRadio>
      <oolongRadio label="上海" disabled></oolongRadio>
      <oolongRadio label="深圳"></oolongRadio>
      <oolongRadio label="杭州"></oolongRadio>
    </oolongRadioGroup>
    <oolongRadioGroup v-model="button3" type="button">
      <oolongRadio label="北京" disabled></oolongRadio>
      <oolongRadio label="上海" disabled></oolongRadio>
      <oolongRadio label="深圳" disabled></oolongRadio>
      <oolongRadio label="杭州" disabled></oolongRadio>
    </oolongRadioGroup>
    <br><br>
    <oolongRadioGroup v-model="button4" type="button" size="large">
      <oolongRadio label="北京"></oolongRadio>
      <oolongRadio label="上海"></oolongRadio>
      <oolongRadio label="深圳"></oolongRadio>
      <oolongRadio label="杭州"></oolongRadio>
    </oolongRadioGroup>
    <oolongRadioGroup v-model="button5" type="button">
      <oolongRadio label="北京"></oolongRadio>
      <oolongRadio label="上海"></oolongRadio>
      <oolongRadio label="深圳"></oolongRadio>
      <oolongRadio label="杭州"></oolongRadio>
    </oolongRadioGroup>
    <oolongRadioGroup v-model="button6" type="button" size="small">
      <oolongRadio label="北京"></oolongRadio>
      <oolongRadio label="上海"></oolongRadio>
      <oolongRadio label="深圳"></oolongRadio>
      <oolongRadio label="杭州"></oolongRadio>
    </oolongRadioGroup>
  </div>
</template>
<script>

export default {
  data() {
    return {
      single: false,

      phone: 'apple',
      animal: '爪哇犀牛',

      disabledSingle: true,
      disabledGroup: '爪哇犀牛',

      vertical: 'apple',

      button1: '北京',
      button2: '北京',
      button3: '北京',

      button4: '北京',
      button5: '北京',
      button6: '北京'
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
